<template>
    <div>
        <h1>test</h1>
        <div>{{userInfo.name}}</div>
        <div>{{newUserInfo}}</div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive,Ref, toRef, toRefs } from 'vue'

interface Member {
    id: number,
    name: string,
    school?:string
}



export default defineComponent({
    setup() {
        // 定义一个带有响应性的成员对象
        const userInfo:Member = reactive({
            id: 1,
            name: 'petter'
        })

        setTimeout(() => {
            userInfo.name = "tom"
        }, 2000)

        // 这个变量在2s后不会同步更新
        const newUserInfo: Member = { ...userInfo }

        console.log("newUserInfo", newUserInfo);
        newUserInfo.name = "asdasd"
        // const {name} = userInfo

        // 使用toRef
        const name = toRef(userInfo, "name");
        // name.value = "name1"
        console.log("name===1", name);
        const school: Ref<string | undefined | null> = toRef(userInfo, "school")

        console.log("school==111",school);
        

        setTimeout(() => {
            name.value = "hello"
            console.log("name===2", name);
            school.value = "ruiyuan school!"
            // school.value = null
            // console.log("school~2:",userInfo,school);
            
        }, 4000)
        

        // userInfo.name = "tom"

        // 使用toRefs
        const userInfoRefs = toRefs(userInfo);
        console.log("userInfoRefs==", userInfoRefs);







        return {
            userInfo,
            newUserInfo,
            // name
        }
    }
})
</script>

<style scoped>

</style>